<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%@ include file="/pub/head_latest.inc"%>
<%--样式 --%>
<link href="${baseURL}/themes/plugin/bootstrap/css/bootstrap.css"
	rel="stylesheet" type="text/css" />
<link
	href="${baseURL}/themes/plugin/bootstrap-dialog/css/bootstrap-dialog.css"
	rel="stylesheet" type="text/css" />
<link href="${baseURL}/themes/plugin/bootstrapTable/bootstrap-table.css"
	rel="stylesheet" type="text/css" />
<%-- 时间选择器 --%>
<link
	href="${baseURL}/themes/plugin/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css"
	rel="stylesheet" media="screen">
	<!-- 滚动条 custom scrollbar plugin -->
	<link
		href="${baseURL}/themes/plugin/scrollbar/jquery.mCustomScrollbar.css"
		rel="stylesheet" type="text/css" />
	<link href="${baseURL}/themes/blue/css/sys.css" rel="stylesheet"
		type="text/css" />
	<link rel="stylesheet"
		href="${baseURL}/assets/css/font-awesome-02.min.css" />
	<link href="${baseURL}/themes/blue/css/fonts/iconfont.css"
		rel="stylesheet" type="text/css" />

	<%--八斗通用字体图标 --%>
	<link href="${baseURL}/themes/common/bd-iconfont/iconfont.css"
		rel="stylesheet" type="text/css" />

	<%--JS文件 --%>
	<script src="${baseURL}/js/jquerys/jquery-1.12.1.min.js"
		type="text/javascript"></script>
	<script src="${baseURL}/themes/plugin/bootstrap/js/bootstrap.min.js"
		type="text/javascript"></script>
	<script
		src="${baseURL}/themes/plugin/bootstrap-dialog/js/bootstrap-dialog.js"
		type="text/javascript"></script>


	<script
		src="${baseURL}/themes/plugin/bootstrapTable/bootstrap-table.js"
		type="text/javascript"></script>
	<script
		src="${baseURL}/themes/plugin/bootstrapTable/locale/bootstrap-table-zh-CN.min.js"
		type="text/javascript"></script>

	<!-- 滚动条 custom scrollbar plugin -->
	<script
		src="${baseURL}/themes/plugin/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
	<%-- 时间选择器 --%>
	<script type="text/javascript"
		src="${baseURL}/themes/plugin/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"
		charset="UTF-8"></script>
	<script type="text/javascript"
		src="${baseURL}/themes/plugin/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"
		charset="UTF-8"></script>

	<script src="${baseURL}/js/sys-event.js" type="text/javascript"></script>

	<script src="${baseURL}/js/sdAppFrameworkCommon.js"
		type="text/javascript"></script>
	<script src="${baseURL}/js/sdAppFrameworkAddressBook.js"
		type="text/javascript"></script>
	<script src="${baseURL}/js/addressBook.js" type="text/javascript"></script>

	<script src="${baseURL}/js/ajaxfileupload.js" type="text/javascript"></script>
	<script src="${baseURL}/js/common-upload.js" type="text/javascript"></script>
	<script src="${baseURL}/js/BT.js" type="text/javascript"></script>
<title>流程实例列表-${basePageTitle}</title>
<style type="text/css">

.bootstrap-dialog-message{text-align:center;}
.bootstrap-dialog-message>p{text-align:center;}
.bootstrap-dialog-message>h4{text-align:center;}
.bootstrap-dialog-footer-buttons{text-align:center;}
</style>
</head>
<body class="FrameRightBg">
<div class="FrameRight" id="FrameRightContent">
		<!-- 这里定义了转发进入的TAB对应的菜单ID，也是TAB的属性ID值 -->
		<input type="hidden" name="menuId" id="menuId" value="${param.menuId}" />
		<div id="mainsearch" style="width: 100%; margin-left: 0px">
		<%@ include file="/WEB-INF/jsp/module/view/new_selector_form.jsp"%>
			<form id="formsearch" method="post">
				<%-- <table>
					<tr>
						<td align="left" class="l-table-edit-td">标题:</td>
						<td align="left" class="l-table-edit-td">
						 <input name="title" type="text" id="title"
							ltype="text" class="form-control" inputWidth="400" ltype="text"
							placeholder="流程名称/业务对象名称/业务类型" /></td>
						<td align="left" class="l-table-edit-td">创建日期:</td>
						<td align="left" class="l-table-edit-td" >
						<fmt:formatDate value="" var="date" pattern="yyyy-MM-dd"/>
						 <input name="startTime" type="text" id="startTime"
							 class="ui-datepicker-input form-control" inputWidth="400" readonly
							 /></td>
						<td>-</td>
						<td align="left" class="l-table-edit-td">
						 <input name="endTime" type="text" id="endTime"
							 class="ui-datepicker-input form-control" inputWidth="400" readonly
							/></td>
						<td align="right" class="l-table-edit-td">归档状态:</td>
				<td align="left" class="l-table-edit-td">
					<input type="checkbox" id="flgArchive_0" value="0" name="flgArchive0" class="field" checked="checked"/>未归档
		         </td>
		         <td align="left" class="l-table-edit-td">
		         	<input type="checkbox" id="flgArchive_1" value="1" name="flgArchive1" class="field" checked="checked"/>已归档
		         </td>
						<td align="left" class="l-table-edit-td"
							style="padding-left: 30px">
							<button type="button" id="btnSearch"
								class="l-button l-button-submit">
								<i class="fa fa-search"></i> 搜索
							</button>
						</td>
						<td align="left" class="l-table-edit-td">
							<button type="reset" id="btnReset" class="l-button l-button-test">
								<i class="fa fa-exchange"></i> 重置
							</button>
						</td>
					</tr>
				</table> --%>
				 <div class="selector-form"></div>
			</form>
		</div>
		<div class="common-option" style="margin-top: 5px">
			<div class="inner">
				<button id="add" type="button" class="btn btn-icon"
					onclick="FF_ViewClickEvent()">
					<i class="icon iconfont bd-eye-o"></i>监控
				</button>
				<button id="resume" type="button" class="btn btn-icon"
					onclick="FF_RestoreClickEvent()">
					<i class="icon iconfont bd bd-redo"></i>重置未归档
				</button>
				<button id="delete" type="button" class="btn btn-icon"
					onclick="FF_ArchiveClickEvent(this)">
					<i class="icon iconfont bd bd-folder-o"></i>归档
				</button>
				<button id="setPanel" type="button" class="btn btn-icon"
					onclick="FF_DeletedClickEvent(this)">
					<i class="l-icon l-icon-a fa fa-minus-square-o"></i>删除
				</button>
			</div>
		</div>
		<!-- 表格列表 -->
		<div class="common-table">
			<table id="maingrid" style="margin-left: 0px; width: 100%"></table>
		</div>


	</div>
  <script type="text/javascript">

      $('#endTime').datetimepicker({
    	    format: 'yyyy-mm-dd hh:ii',
    	    language: 'zh-CN',
    	　　　　　　weekStart: 1,
    	　　　　　　todayBtn: 1,//显示‘今日’按钮
    	　　　　　　autoclose: 1,
    	　　　　　　todayHighlight: 1,
    	　　　　　　startView: 2,
    	　　　　　　minView: 1,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。
    	　　　　　　clearBtn:true,//清除按钮
    	　　　　　　forceParse: 0
    	});
      $('#startTime').datetimepicker({
  	    format: 'yyyy-mm-dd hh:ii',
  	    language: 'zh-CN',
  	　　　　　　weekStart: 1,
  	　　　　　　todayBtn: 1,//显示‘今日’按钮
  	　　　　　　autoclose: 1,
  	　　　　　　todayHighlight: 1,
  	　　　　　　startView: 2,
  	　　　　　　minView: 1,  //Number, String. 默认值：0, 'hour'，日期时间选择器所能够提供的最精确的时间选择视图。

  	　　　　　　clearBtn:true,//清除按钮

  	　　　　　　forceParse: 0
  	});
      
    //搜索事件
 	 $("#btnSearch").click(function(e){
		var title = $("#title").val();
		var startTime = $("#startTime").val();
		var endTime = $("#endTime").val();
		var opt = {
		        silent: true,
		        query:{
		        	title:title,
		        	startTime:startTime,
		        	endTime:endTime
		        }
		    };
		$("#maingrid").bootstrapTable('refresh',opt);
 	 });

      //重置事件
      $("#btnReset").click(function(e){
    	  $("#title").val("");
    	  $("#startTime").val("");
    	  $("#endTime").val("");
    	  $("#maingrid").bootstrapTable('refresh');
      });
      function queryParams(params){
    	  	var data = [];
  			if(selector != null){
  				data = selector.getSelectorValue();
  			}
  	    	return {
  				pageNo: params.pageNumber,
  				perPageSize: params.pageSize,
  				searchParam: JSON.stringify(data)
  			}
    	}
      function initTable() {
      		$('#maingrid').bootstrapTable({
      			url:'${baseURL}/instance/flow/flowinstancelist/listJSON.do',
      			method: 'post',
    			contentType: "application/x-www-form-urlencoded",
           		sidePagination: "server",
           		queryParams: queryParams,
           		queryParamsType:"undenfied",
           	 dataField: "Rows",
             totalField:"Total",
             striped: true,                      //是否显示行间隔色
    	        pageNumber:1,                       //初始化加载第一页，默认第一页
    	     	pagination: true,
    	        clickToSelect: true,                //是否启用点击选中行
                uniqueId: "id",                 //每一行的唯一标识，一般为主键列
           		columns: [{
                    checkbox: true
                },{
                       field: 'title',
                       title: '标题'
                   }, {
                       field: 'statusDesc',
                       title: '状态',
                       formatter: function (value, Rows, index) {
                    	   return value;
    	               }
    			   }, {
                       field: 'creatorName',
                       title: '创建人'
    			   }, {
                       field: 'fmtCreateTime',
                       title: '创建时间'
    			   }, {
                       field: 'fmtArchiveTime',
                       title: '归档时间'
    			   }]
      		})
    	}
      $(function () {
  		initTable();
  		$("#maingrid").css("text-align","center");
  		}) 
  		
  		//查看事件
      function FF_ViewClickEvent(btnItem){
    	  var row = $('#maingrid').bootstrapTable('getSelections');
          if (!row || row.length == 0) { BT.showWarning("请先选择需要监控的实例行!"); return false;}
      	 // parent.f_addTab("flowinstanceView", '流程实例监控', '${baseURL}/instance/node/nodeinstancelist/list.do?fiId='+row.id+'&menuId=${param.menuId}');
      	 window.open('${baseURL}/instance/node/nodeinstancelist/list.do?fiId='+row[0].id,'','width=1100,height=500');
      }
      
    //重置未归档事件
      function FF_RestoreClickEvent(btnItem){
    	  var selectedRow = $('#maingrid').bootstrapTable('getSelections');
          if (!selectedRow || selectedRow.length <= 0) { BT.showWarning("请先选择需要恢复的记录行（流程文档实例）!"); return false;}
          var titles = "";
          for(var i=0; i < selectedRow.length; i++){
        	  if(selectedRow[i].status == 0 || selectedRow[i].status == 1 || selectedRow[i].status == 3){
        		  BT.showWarning("您选择的记录行中包含未归档数据，未归档数据不需要[重置未归档]操作!"); return false;
        	  }
        	  if(titles.length > 0 ) titles += ",";  
        	  titles += selectedRow[i].title;
          }
          BT.showConfirm('重置','您确定重置选定的记录行（流程文档实例）吗?</br>'+titles,function(){
            			$.getJSON("${baseURL}/instance/flow/flowinstancemonitor/resume.do",{ids : LG.serialIdParam(selectedRow)},
            				function(data){
			              		if(data){
			              			if(data.hasOk) BT.showSuccess("操作成功!",function(){FF_Reload()});
		               				else{
		 	                			BT.showError("操作失败!"+data.message);
		 	                		}
			              		}
            			});
 			});
      }
    //删除事件
      function FF_DeletedClickEvent(btnItem){
    	  var selectedRow = $('#maingrid').bootstrapTable('getSelections');
          if (!selectedRow || selectedRow.length <= 0) { BT.showWarning("请先选择需要删除的记录行（流程文档实例）!"); return false;}
          BT.showConfirm('删除','您确定删除选定的记录行（流程文档实例）吗?',function(){
        	  $.getJSON("${baseURL}/instance/flow/flowinstancedelete/delete.do",{ids : LG.serialIdParam(selectedRow)},
            		function(data){
        		  	if(data){
            			if(data.hasOk) BT.showSuccess("操作成功!",function(){FF_Reload()});
         				else{
               				BT.showError("操作失败!"+data.message);
               			}
            		}
            	});
          });
      }
    
    //归档事件
      function FF_ArchiveClickEvent(btnItem){
    	  var selectedRow = $('#maingrid').bootstrapTable('getSelections');
          if (!selectedRow || selectedRow.length <= 0) { BT.showWarning("请先选择需要归档的记录行（流程文档实例）!"); return false;}
          var titles = "";
          for(var i=0; i < selectedRow.length; i++){
        	  if(selectedRow[i].status == 2){
        		  BT.showWarning("您选择的记录行中包含已归档数据，已归档数据不需要[归档]操作!"); return false;
        	  }
        	  if(titles.length > 0 ) titles += ",";  
        	  titles += selectedRow[i].title;
          }
          BT.showConfirm('归档','您确定归档选定的记录行（流程文档实例）吗?</br>'+titles,function(){
  			$.getJSON("${baseURL}/instance/flow/flowinstancemonitor/archive.do",{ids : LG.serialIdParam(selectedRow)},
  				function(data){
	              		if(data){
	              			if(data.hasOk) BT.showSuccess("操作成功!",function(){FF_Reload()});
             				else{
	                			BT.showError("操作失败!"+data.message);
	                		}
	              		}
  			});
		});
      }
    
      function FF_Reload(){
      	$("#maingrid").bootstrapTable('refresh');
     	  
       }
   // 渲染选择器
  	var searchGrid = {
  		$element: $('#maingrid'),
  		load: function(){
  			this.$element.bootstrapTable('refresh');
  		}
  	}
    var archive = [{id:"0;1;3",text:"未归档"},{id:"2",text:"已归档"}];
   	var selector = $.initSelector(searchGrid, [
								{id:"genDate",name:"创建时间",valueText:"全部",isExtended:false,selectType:5,formate:"yyyy-MM-dd",startDay:null,endDay:null,type:0,measurement:null},
								{id:"status",name:"归档状态",value:null,valueText:"全部",isExtended:false,selectType:9},
          	        		    {id:"title",name:"标题",value:"",isExtended:false,selectType:1}
          	        		   
          	        		   ], null, [{id:"status",name:"归档状态",data:archive}]);
  </script>
  </body>
  </html>
